import React, { useState } from "react";
import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { Link, Routes, Route, Navigate, useLocation } from "react-router-dom";
import Screen from "./route/Screen/Screen";
import Card from "./route/Card/Card";
import Chart from "./route/Chart/Chart";
import Api from "./route/API/Api";

const { Content, Footer, Sider } = Layout;
type MenuItem = Required<MenuProps>["items"][number];

function getItem(label: React.ReactNode, key: React.Key, icon?: React.ReactNode, children?: MenuItem[]): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items: MenuItem[] = [
    getItem(<Link to="/screen">大屏管理</Link>, "/screen"),
    getItem(<Link to="/card">卡片管理</Link>, "/card"),
    getItem(<Link to="/chart">图形库管理</Link>, "/chart"),
    getItem(<Link to="/api">接口管理</Link>, "/api"),
];

function App() {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    const location = useLocation();

    const breadcrumbMap: Record<string, string[]> = {
        "/screen": ["大屏管理"],
        "/card": ["卡片管理"],
        "/chart": ["图形库管理"],
        "/api": ["接口管理"],
    };

    const breadcrumbItems = [{ title: "首页" }, ...((breadcrumbMap[location.pathname] || []).map((t) => ({ title: t })))];

    return (
        <Layout style={{ minHeight: "100vh" }}>
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="demo-logo-vertical" />
                <Menu theme="dark" selectedKeys={[location.pathname]} mode="inline" items={items} />
            </Sider>
            <Layout>
                <Content style={{ margin: "0 16px" }}>
                    <Breadcrumb style={{ margin: "16px 0" }} items={breadcrumbItems} />
                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}>
                        <Routes>
                            <Route path="/" element={<Navigate to="/screen" replace />} />
                            <Route path="/screen" element={<Screen />} />
                            <Route path="/card" element={<Card />} />
                            <Route path="/chart" element={<Chart />} />
                            <Route path="/api" element={<Api />} />
                            <Route path="*" element={<div>未找到页面</div>} />
                        </Routes>
                    </div>
                </Content>
                <Footer style={{ textAlign: "center" }}>Ant Design ©{new Date().getFullYear()} Created by Ant UED</Footer>
            </Layout>
        </Layout>
    );
}

export default App;
